<div class="delete-resource-modal">
  <!-- Use a form so that the enter key submits when typing a project name to confirm. -->
  <form>
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true" aria-label="Close" ng-click="cancel()">
        <span class="pficon pficon-close"></span>
      </button>
      <h1 class="modal-title">Are you sure you want to delete the project '<strong>{{project | displayName}}</strong>'?</h1>
    </div>
    <div class="modal-body">
      <p>
        This will <strong>delete all resources</strong> associated with
        the project {{project | displayName}} and <strong>cannot be
        undone</strong>.  Make sure this is something you really want to do!
      </p>
      <div ng-show="typeNameToConfirm">
        <p>Type <strong>{{project.metadata.name}}</strong> to confirm deletion.</p>
        <p>
          <label class="sr-only" for="resource-to-delete">project to delete</label>
          <input
              ng-model="confirmName"
              id="resource-to-delete"
              type="text"
              class="form-control input-lg"
              autocorrect="off"
              autocapitalize="off"
              spellcheck="false"
              autofocus>
        </p>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-default" type="button" ng-click="cancel()">Cancel</button>
      <button ng-disabled="typeNameToConfirm && confirmName !== project.metadata.name && confirmName !== (project | displayName : false)" class="btn btn-danger" type="submit" ng-click="delete()">Delete</button>
    </div>
  </form>
</div>
